﻿<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="List.aspx.cs" Inherits="NX5Web.admin.Order.List" %>

<div id="orderlist" style="margin:15px">
    <div style="margin-top:10px;">
        <el-form :inline="true" :model="searchForm">
            <el-form-item label="订单状态">
                <el-select v-model="searchForm.Status" style="width: 240px" clearable>
                    <el-option label="已下单" value="0"></el-option>
                    <el-option label="待发货" value="1"></el-option>
                    <el-option label="已发货" value="2"></el-option>
                    <el-option label="已签收" value="3"></el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="订单号"><el-input v-model="searchForm.SaleNumber" clearable></el-input></el-form-item>
            <el-form-item label="联系电话"><el-input v-model="searchForm.Phone" clearable></el-input></el-form-item>
            <el-form-item><el-button type="primary" @click="onSearch">查询</el-button></el-form-item>
        </el-form>
        <el-table :data="OrderList" border style="width: 100%">
            <el-table-column label="编号" width="80" align="center" prop="ID"></el-table-column> 
            <el-table-column label="兑换物品" width="120" align="center" prop="Img">
                <template #default="scope">
                    <img :src="'https://nx5.abc5g.com/'+scope.row.Img" style="max-width:100px;max-height:80px" />
                </template>
            </el-table-column> 
            <el-table-column label="兑换物品名称" align="center" prop="Title"></el-table-column> 
            <el-table-column label="兑换数量" width="100" align="center" prop="Number"></el-table-column> 
            <el-table-column label="兑换人" width="120" align="center" prop="Name"></el-table-column> 
            <el-table-column label="联系方式" width="120" prop="Phone"></el-table-column>
            <el-table-column label="收货地址" prop="Address"></el-table-column>
            <el-table-column label="订单编号（货源）" prop="SaleNumber"></el-table-column> 
            <el-table-column label="物流编号" prop="OrderNumber"></el-table-column>
            <el-table-column label="状态" width="100" align="center" prop="Status">
                <template #default="scope">
                    <el-tag :type="OrderStatusType[scope.row.Status]">{{OrderStatus[scope.row.Status]}}</el-tag>
                </template>
            </el-table-column> 
            <el-table-column label="操作" width="320">
                <template #default="scope">
                    <el-button size="small" @click="handleShowAddSaleNumber(scope.$index, scope.row)">填写订单编号</el-button>
                    <el-button size="small" @click="handleShowAddOrderNumber(scope.$index, scope.row)">填写物流编号</el-button>
                </template>
            </el-table-column>
        </el-table>
    </div>
    <el-dialog v-model="showAddSaleNumber" title="填写订单编号" width="400">
        <div>
            <el-form label-width="auto" style="max-width: 600px"> 
                <el-form-item label="订单编号（货源）">
                    <el-input v-model="currentRow.SaleNumber" type="textarea" :rows="2" clearable></el-input>
                </el-form-item>  
            </el-form>
        </div>
        <template #footer>
            <div class="dialog-footer">
                <el-button @click="showAddSaleNumber = false">取 消</el-button>
                <el-button type="primary" @click="submitSaleNumber">确 定</el-button>
            </div>
        </template>
    </el-dialog>
    <el-dialog v-model="showAddOrderNumber" title="填写物流编号" width="400">
        <div>
            <el-form label-width="auto" style="max-width: 600px"> 
                <el-form-item label="物流编号">
                    <el-input v-model="currentRow.OrderNumber" type="textarea" :rows="2" clearable></el-input>
                </el-form-item>  
            </el-form>
        </div>
        <template #footer>
            <div class="dialog-footer">
                <el-button @click="showAddOrderNumber = false">取 消</el-button>
                <el-button type="primary" @click="submitOrderNumber">确 定</el-button>
            </div>
        </template>
    </el-dialog>
</div>

<script>

    createApp({
        el: '#orderlist',
        data() {
            return {
                searchForm: {
                    Status: '',
                    SaleNumber: '',
                    Phone: ''
                },
                OrderList: [],
                OrderStatus: {
                    0: '已下单',
                    1: '待发货',
                    2: '已发货',
                    3: '已签收'
                },
                OrderStatusType: {
                    0: 'primary',
                    1: 'warning',
                    2: 'warning',
                    3: 'success'
                },
                showAddSaleNumber: false,
                showAddOrderNumber: false,
                currentRow: {}
            };
        },
        methods: {
            submitSaleNumber() {
                loaddingPlus(true);
                this.currentRow.Status = '1';
                ktlapi({
                    action: 'Cus_AddSaleNumber',
                    data: {
                        ID: this.currentRow.ID,
                        SaleNumber: this.currentRow.SaleNumber
                    }
                }).then(() => {
                    loaddingPlus(false);
                    Notify.success("订单编号设置成功");
                    this.showAddSaleNumber = false;
                })
            },
            submitOrderNumber() {
                loaddingPlus(true);
                this.currentRow.Status = '2';
                ktlapi({
                    action: 'Cus_AddOrderNumber',
                    data: {
                        ID: this.currentRow.ID,
                        OrderNumber: this.currentRow.OrderNumber
                    }
                }).then(() => {
                    loaddingPlus(false);
                    Notify.success("物流编号设置成功");
                    this.showAddOrderNumber = false;
                })
            },
            handleShowAddSaleNumber(index, row) {
                this.currentRow = row;
                this.showAddSaleNumber = true;
            },
            handleShowAddOrderNumber(index, row) {
                this.currentRow = row;
                this.showAddOrderNumber = true;
            },
            loadOrderList() {
                loaddingPlus(true);
                ktlapi({
                    "action": "Cus_GetCoinsOrders",
                    "data": {
                        ...this.searchForm,
                        Status: ['', undefined].includes(this.searchForm.Status) ? -1 : this.searchForm.Status
                    }
                }).then(res => {
                    this.OrderList = res.data;
                    loaddingPlus(false);
                });
            },
            onSearch() {
                this.loadOrderList();
            }
        },
        mounted: function () {
            this.loadOrderList();
        }
    });
</script>